<template>
  <div class="home-dashboard">

    <!-- 顶部统计卡片 -->
    <el-row :gutter="16" class="mt-16px">
      <el-col :span="6" v-for="(item, idx) in statsList" :key="idx">
        <el-card
          shadow="hover"
          class="stat-card clickable"
          @click="handleStatClick(idx)"
        >
          <div class="stat-icon">
            <el-icon :size="32"><component :is="item.icon" /></el-icon>
          </div>
          <div class="stat-content">
            <div class="stat-value">{{ item.value }}</div>
            <div class="stat-label">{{ item.label }}</div>
          </div>
        </el-card>
      </el-col>
    </el-row>

    <!-- 账户排行和代理商后台备款金额 -->
    <el-row :gutter="16" class="mt-16px">
  
      <el-col :span="16">
        <el-card shadow="never" class="agent-reserve-card">
          <div class="section-title">代理商后台备款金额</div>
          <el-row :gutter="16">
            <el-col :span="6" v-for="(item, idx) in agentReserveList" :key="idx">
              <div class="reserve-item">
                <div class="reserve-label">{{ item.label }}</div>
                <div class="reserve-value">{{ item.value }}</div>
              </div>
            </el-col>
          </el-row>
        </el-card>
      </el-col>
    </el-row>

    <!-- 排行榜表格 -->
    <el-row :gutter="16" class="mt-16px">
      <el-col :span="12">
        <el-card shadow="never" class="table-card">
          <div class="section-title">昨日商家充值排行榜版</div>
          <el-table :data="yesterdayRechargeRank" border stripe height="320">
            <el-table-column prop="companyName" label="公司名称" min-width="120" />
            <el-table-column prop="totalAmount" label="总消耗" min-width="100" />
            <el-table-column prop="ratio" label="消耗环比" min-width="100" />
          </el-table>
        </el-card>
      </el-col>
      <el-col :span="12">
        <el-card shadow="never" class="table-card">
          <div class="section-title">备款排行榜版</div>
          <el-table :data="currentReserveRank" border stripe height="320">
            <el-table-column prop="rank" label="排名" min-width="60">
              <template #default="scope">
                {{ scope.row.rank }}
              </template>
            </el-table-column>
            <el-table-column prop="companyName" label="公司名称" min-width="120" />
            <el-table-column prop="totalReserve" label="总备款" min-width="100" />
          </el-table>
        </el-card>
      </el-col>
    </el-row>
  </div>
</template>

<script lang="ts" setup>
import { ref, onMounted } from 'vue'
import { useRouter } from 'vue-router'
import { useUserStore } from '@/store/modules/user'
import { useI18n } from 'vue-i18n'
import { UserFilled, Money, Coin, WarningFilled } from '@element-plus/icons-vue'
import {
  getOverviewReport,
  getAgentReserve,
  getYesterdayRechargeRank,
  getCurrentReserveRank
} from '@/api/report'
import type { RechargeRankVO, ReserveRankVO } from '@/api/report/types'

const { t } = useI18n()
const userStore = useUserStore()
const router = useRouter()

// 顶部统计卡片
const statsList = ref([
  { label: '充值记录', value: 0, icon: UserFilled },
  { label: '退款记录', value: 0, icon: Money },
  { label: '催款记录', value: 0, icon: Coin },
  { label: '充值失败', value: 0, icon: WarningFilled }
])

// 代理商后台备款金额
const agentReserveList = ref([
  { label: '千川备款', value: 0 },
  { label: 'AD备款', value: 0 },
  { label: '本地备款', value: 0 },
  { label: '钱包备款', value: 0 }
])

// 昨日商家充值排行榜
const yesterdayRechargeRank = ref<RechargeRankVO[]>([])
// 当前账户备款排行榜
const currentReserveRank = ref<ReserveRankVO[]>([])

onMounted(async () => {
  // 顶部统计卡片
  const overview = await getOverviewReport()
  statsList.value = [
    { label: '充值记录', value: overview.rechargeCount, icon: UserFilled },
    { label: '退款记录', value: overview.refundCount, icon: Money },
    { label: '催款记录', value: overview.reminderCount, icon: Coin },
    { label: '充值失败', value: overview.rechargeFailCount, icon: WarningFilled }
  ]

  // 代理商后台备款金额
  const agentReserve = await getAgentReserve()
  agentReserveList.value = [
    { label: '千川备款', value: agentReserve.qianchuan },
    { label: 'AD备款', value: agentReserve.ad },
    { label: '本地备款', value: agentReserve.local },
    { label: '钱包备款', value: agentReserve.wallet }
  ]

  // 昨日商家充值排行榜
  yesterdayRechargeRank.value = await getYesterdayRechargeRank()

  // 当前账户备款排行榜
  currentReserveRank.value = await getCurrentReserveRank()
})

// 跳转逻辑
const handleStatClick = (idx: number) => {
  switch (idx) {
    case 0:
      router.push('/recharge/fund-record')
      break
    case 1:
      router.push({ path: '/recharge/juliang/refundrecord/index', query: { status: 1 } })
      break
    case 2:
      router.push('/merchant/merchant')
      break
    case 3:
      router.push('/recharge/fund-record')
      break
  }
}
</script>

<style lang="scss" scoped>
.home-dashboard {
  padding: 12px;
  background: #f6f8fb;
}

.welcome-card {
  margin-bottom: 8px;
}

.stat-card {
  display: flex;
  align-items: center;
  padding: 16px 20px;

  .stat-icon {
    display: flex;
    width: 48px;
    height: 48px;
    margin-right: 16px;
    color: #409eff;
    background: #eaf3ff;
    border-radius: 50%;
    align-items: center;
    justify-content: center;
  }

  .stat-content {
    .stat-value {
      margin-bottom: 4px;
      font-size: 28px;
      font-weight: bold;
    }

    .stat-label {
      font-size: 14px;
      color: #888;
    }
  }
}

.stat-card.clickable {
  cursor: pointer;
  transition: box-shadow 0.2s, border-color 0.2s;

  &:hover {
    border-color: #409eff;
    box-shadow: 0 4px 16px rgb(64 158 255 / 15%);
  }
}

.section-title {
  margin-bottom: 16px;
  font-size: 16px;
  font-weight: 600;
  color: #333;
}

.account-ranking-card, .agent-reserve-card {
  min-height: 120px;
}

.ranking-item, .reserve-item {
  padding: 16px 8px;
  margin-bottom: 8px;
  text-align: center;
  background: #f4f8fb;
  border-radius: 8px;

  .ranking-label, .reserve-label {
    margin-bottom: 4px;
    font-size: 14px;
    color: #888;
  }

  .ranking-value, .reserve-value {
    font-size: 20px;
    font-weight: bold;
    color: #222;
  }
}

.table-card {
  min-height: 400px;
}
</style>
